<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>常用方法</h1>
    <ul>$.prev(SELECTOR)：获取符合选择器的前一个元素，不传选择器时获取前一个元素。</ul>
    <li>$.next(SELECTOR)：获取符合选择器的后一个元素，不传选择器时获取后一个元素。</li>
    <li>$.siblings(SELECTOR)：获取符合选择器的所有兄弟元素，不包含自己。</li>
    <h1>其他遍历方法</h1>
    <li>$.each(function(index,value))：遍历jquery对象，回调函数中this指向DOM节点对象。</li>
    <li>$.filter(SELECTOR)：使用选择器，再次过滤jQuery对象。</li>
    <ul>
        <li class="li1">1</li>
        <li>2</li>
        <li class="li1">3</li>
        <li>4</li>
        <li class="li1">5</li>
        <li id="li-me" class="li1">6（我）</li>
        <li class="li1">7</li>
        <li>8</li>
        <li class="li1">9</li>
        <li>10</li>
    </ul>
    <button>向前遍历</button>
    <button>向后遍历</button>
    <button>遍历同级所有</button>
</body>
<script src="../jquery-3.6.0.min.js"></script>
<script>

    let $liMe = $("#li-me");

    // 向前查找：前面一个class=li1的相邻兄弟
    $("button").eq(0).on("click",function() {
        let $li = $liMe.prev(".li1");
        console.log($li.text());
        
    })

    // 向后查找：后面一个class=li1的相邻兄弟
    $("button").eq(1).on("click",function() {
        let $li = $liMe.next(".li1");
        console.log($li.text());
    })

    // 遍历所有兄弟（不包含自己）
    $("button").eq(2).on("click",function() {
        // 自己的兄弟且是.li1的所有元素
        const $obj = $liMe.siblings(".li1");

        // jQuery提供的遍历方法，用于遍历jQuery对象
        // 传递一个回调函数
        // 回调函数参数1: 当前索引
        // 回调函数参数2: 当前遍历的DOM对象（遍历函数中的this也是当前DOM对象）
        $obj.each(function(index,value) {
            // console.log(index, " = ",value.innerText);
            console.log(index, " = ",this.innerText);
            console.log("this == value:",this == value);
        });
    })
</script>
</html>